<template>
  <div id="app"
       class="main">
    <div id="boxMap"
         class="map" />
    <div class="nav">
      中天高科通信管道管理平台
    </div>
    <div class="nav_btn">
      <div class="btn_left">
        <div class="logo">
          <img src="../assets/logo.png"
               alt="">
        </div>
        <div class="time_bar">
          <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
        </div>
        <!-- <div
          class="sel_btn"
          @click="openDialog"
        >
          {{ buttonName }}
          <i
            class="el-icon-arrow-down"
            color="#0efcff"
          />
        </div>
        <div
          v-if="showDialog"
          class="list-dialog"
        >
          <el-checkbox
            v-model="checkAll"
            text-color="#0EFCFF"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >
            国家高速
          </el-checkbox>
          <div style="margin: 15px 0" />
          <el-checkbox-group
            v-model="checkedCities"
            text-color="#0EFCFF"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="city in cities"
              :key="city"
              text-color="#0EFCFF"
              :label="city"
            >
              {{ city }}
            </el-checkbox>
          </el-checkbox-group>
          <br>
          <el-checkbox
            v-model="checkAll1"
            text-color="#0EFCFF"
            :indeterminate="isIndeterminate1"
            @change="handleCheckAllChange1"
          >
            分公司
          </el-checkbox>
          <div style="margin: 15px 0" />
          <el-checkbox-group
            v-model="checkedCities1"
            text-color="#0EFCFF"
            @change="handleCheckedCitiesChange1"
          >
            <el-checkbox
              v-for="city in cities1"
              :key="city"
              text-color="#0EFCFF"
              :label="city"
            >
              {{ city }}
            </el-checkbox>
          </el-checkbox-group>
        </div> -->
      </div>
      <!-- <div class="btn_right"> -->
      <!-- <a href="http://texasbarbecue.gitee.io/bigscreen1/">
          <div class="btn_list">通信管道总览数据</div>
        </a> -->
      <!-- </div> -->
    </div>

    <div class="content">
      <div class="centerBox">
        <div class="baseBox centerMainBox1"
             style="height: 70%">
          <div class="baseBoxLeft left">
            <div class="boxTitle">
              分公司名称
            </div>
            <img src="../assets/img/left.png"
                 alt="">
            <div class="equipment-box">
              <table class="equipment_table env_table table_left">
                <tr>
                  <!-- item.Map, index -->
                  <td>序号</td>
                  <td>分公司名称</td>
                  <td style="width:80px">
                    管理里程<br>（公里）
                  </td>
                  <td style="width:80px">
                    租赁里程<br>（公里）
                  </td>
                </tr>
                <!-- {active:flag==index},'tr-color-' + index % 2 -->
                <tr v-for="(item, index) in componyManageKM"
                    :key="index"
                    :class="{active:index%2==0}"
                    @click="clickTr(item)">
                  <td>{{ index + 1 }}</td>
                  <td>{{ item[0] + '分公司' }}</td>
                  <td>{{ item[1]}}</td>
                  <td>{{ item[2]}}</td>
                </tr>
                <tr>
                  <td>18</td>
                  <td>岳常公司</td>
                  <td>141.030</td>
                  <td>0</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="baseBoxRight right">
            <ul class="plant">
              <li>
                <a class="jumps">
                  <div class="clear plantTop">
                    <span class="flexLeft">管辖路程（公里）</span>
                    <img class="flexright"
                         src="../assets/img/cy.png"
                         alt="">
                  </div>

                  <p class="plantNum1">6262.348</p>
                  <span class="spans0" />
                </a>
              </li>
              <li>
                <a class="jumps">
                  <div class="clear plantTop">
                    <span class="flexLeft">租赁里程（公里）</span>
                    <img class="flexright"
                         src="../assets/img/cq.png"
                         alt="">
                  </div>
                  <p class="plantNum1">924.976</p>
                  <span class="spans1" />
                </a>
              </li>
              <li>
                <a class="jumps">
                  <div>
                    <span>年租赁里程（公里）</span>
                    <img src="../assets/img/cn.png"
                         alt="">
                  </div>
                  <p class="">924.976</p>
                  <span class="spans2" />
                </a>
              </li>
            </ul>
          </div>
          <div class="baseBoxLeftBottom">
            <div class="boxTitle">
              分公司路段
            </div>
            <!-- <div class="boxTitle">
              分
            </div> -->
            <img src="../assets/img/left.png"
                 alt="">
            <e-charts class="chart"
                      :option="option" />
          </div>
        </div>
        <!-- <div class=".baseBox centerMainBox1">
          
        </div> -->
      </div>

      <div class="rightBox right">
        <div class="baseBox baseBox2">
          <div class="boxTitle">
            租赁合同信息
          </div>
          <img src="../assets/img/left.png"
               alt="">
          <div class="equipment-box">
            <table class="equipment_table env_table table_left">
              <tr>
                <!-- item.Map, index -->
                <td>序号</td>
                <td>合同编号</td>
                <td style="width:80px">
                  所属路段
                </td>
                <td style="width:80px">
                  租赁里程<br>（公里）
                </td>
              </tr>
              <tr v-for="(item, index) in contract"
                  :key="index"
                  :class="{active:index%2==0}"
                  @click="clickTr2(item,index)">
                <td>{{ index + 1 }}</td>
                <td>{{ item.Num }}</td>
                <td>{{ item.roadName }}</td>
                <td>{{ item.Mileage }}</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="baseBoxRightBottom">
          <div class="boxTitle">
            运营商占比
          </div>
          <img src="../assets/img/left.png"
               alt="">
          <e-charts class="chart"
                    :option="option1" />
        </div>
      </div>
    </div>
    <el-dialog title='租赁合同信息'
               class="map_dialog"
               width="620px"
               :modal="false"
               :close-on-click-modal="false"
               :visible.sync="showContractDialog">
      <div class="dialog_bottom">
        <div class="base_data">
          <p>高速名称：<span>{{this.currentContract.highWayName}}</span></p>
          <p>合同编号：<span>{{this.currentContract.Num}}</span></p>
          <p>路段：<span>{{this.currentContract.roadName}}</span></p>
          <p>租赁时间：<span>{{this.currentContract.contractDate}}</span></p>

          <!-- <p>位置：<span>{{ }}</span></p> -->
          <!-- <p>租赁单位：<span>{{ }}</span></p> -->
        </div>
        <div class="pipe_data">
          <p>桩号：<span>{{this.currentContract.stakeNum}}</span></p>
          <p>租赁里程：<span>{{this.currentContract.Mileage}}</span></p>
          <p>运营商：<span>{{this.currentContract.OperatorName}}</span></p>
          <p>签约时间：<span>{{this.currentContract.timeOfContract}}</span></p>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="连霍高速-K49+850"
               class="map_dialog"
               width="620px"
               :modal="false"
               :close-on-click-modal="false"
               :visible.sync="showMapDialog">
      <div class="top">
        <div class="img">
          <img :src="require('@/assets/pointPic.png')"
               alt="">
        </div>
        <div class="steps">
          <div v-for="(item, index) in leftList"
               :key="index"
               :class="{active:flag1==index}"
               class="step"
               @click="clickIcon($event, item, index)">
            <div class="icon">
              <div class="point"
                   :class="{'lease':item.State==1,'used':item.State==2,'space':item.State==3}" />
            </div>
            <div class="detail"
                 :class="{'current':item.Num=='G30/K258+881/003E'}">
              <span class="num">{{ item.PipeNo }}</span>
              <span class="state">{{ item.State == 1 ? '租赁' : item.State == 2 ? '自用' : '空闲' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog_bottom">
        <div class="base_data">
          <!-- <p>具体业务：<span>收费</span></p> -->
          <p>人手孔序号：<span>{{ historyPoint.Num }}</span></p>
          <p>人手孔桩号：<span>{{ historyPoint.HoleNum }}</span></p>
          <p>经度：<span>{{ historyPoint.Point[0] }}</span></p>
          <p>纬度：<span>{{ historyPoint.Point[1] }}</span></p>
          <p>硅芯管数量：<span>{{ historyPoint.PipelineTotal }}</span></p>
          <p>是否存在路由变更：<span>{{ historyPoint.RouteChange }}</span></p>
          <!-- <p>是否存在其他隐患：<span>{{ historyPoint.HiddenDanger }}</span></p> -->
          <p>预留管道情况：<span>{{ historyPoint.ReservedPipelineSituation}}</span></p>
          <p>硅芯管位置：<span>{{ historyPoint.SiliconCoreTubePosition }}</span></p>
          <p>具体业务：<span>{{ historyPoint.Business}}</span></p>
          <p>归属业主单位：<span>{{historyPoint.CompanyName}}</span></p>
        </div>
        <div class="pipe_data">
          <p>管道类型：<span>{{ historyPoint.PipelineType }}</span></p>          
          <p>管道规格：<span>{{ historyPoint.PipelineSpecifications }}</span></p>
          <p>出租管孔数量：<span>{{ historyPoint.leasePilelineNum }}</span></p>
          <p>自用管孔数量：<span>{{ historyPoint.SelfPipelineNum }}</span></p>
          <p>剩余管孔数量：<span>{{ historyPoint.ResiduePilelineNum}}</span></p>
          <p>是否存在桥涵：<span>{{ historyPoint.BridgeCulvert}}</span></p>
          <!-- <p>相邻或相交互通情况：<span>{{ historyPoint.AdjacentIntersectingConditions}}</span></p> -->
          <p>合同编号：<span>{{ historyPoint.ContractNum}}</span></p>          
          <p>管道色标：<span>{{ historyPoint.Color}}</span></p>          
          <p>线缆型号：<span>{{ historyPoint.LineModel}}</span></p>   
          
        </div>
      </div>

      <div class="dialog_btn">
        <div class="btn_group1">
          <button :class="{active:flag3==1}"
                  @click="prev()">
            上一个
          </button>
          <button :class="{active:flag3==2}"
                  @click="next()">
            下一个
          </button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import route from '../../route.js'
import markerList from '../../points.js'
import { _throttle } from '@/utils'
import { debounce } from '@/utils'
import { formatTime } from '../utils/index.js'

export default {
  components: {},
  data () {
    return {
      //e-charts数据
      option: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['管理里程', '租赁里程'],
          textStyle: {
            color: "#fff",
          }
          // icon: 'none'
        },
        toolbox: {
          show: true,
          // feature: {
          //   dataView: { show: true, readOnly: false },
          //   magicType: { show: true, type: ['line', 'bar'] },
          //   restore: { show: true },
          //   saveAsImage: { show: true }
          // }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: ['郑州','南阳','洛阳','信阳'],
            axisLine: {
              lineStyle: {
                color: "#fff",
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: "#fff",
              }
            }
          }
        ],
        series: [
          {
            name: '管理里程',
            type: 'bar',
            data: [
              326.49,578.658,578.461,618.243
            ],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            // label:{
            //   show:true,
            //   position:'top',
            // }
            // markLine: {
            //   data: [{ type: 'average', name: 'Avg' }]
            // }
          },
          {
            name: '租赁里程',
            type: 'bar',
            data: [
              126.076,402,105,108
            ],
            markPoint: {
              data: [
                // { name: 'Max', value: 1000, xAxis: 7, yAxis: 183 },
                // { name: 'Min', value: 1, xAxis: 11, yAxis: 3 }
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            // markLine: {
            //   data: [{ type: 'average', name: 'Avg' }]
            // }
          }
        ]
      },
      option1: {
        // legend: {},
        // tooltip: {
        //   textStyle: 'white',
        //   trigger: 'axis',
        //   showContent: false
        // },
        dataset: {
          source: [
            ['product', '2019', '2020', '2021', '2022', '2023'],
            ['中国电信', 56.5, 82.1, 88.7, 70.1, 53.4],
            ['中国联通', 51.1, 51.4, 55.1, 53.3, 73.8],
            ['中国有线电视', 40.1, 62.2, 69.5, 36.4, 45.2]
          ]
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: "#fff",
            }
          }
        },
        yAxis: {
          gridIndex: 0,
          axisLine: {
            lineStyle: {
              color: "#fff",
            }
          }
        },
        grid: { top: '55%', left: '15%' },
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'pie',
            id: 'pie',
            radius: '40%',
            center: ['50%', '25%'],
            emphasis: {
              focus: 'self',
            },
            label: {
              color: '#fff',
              formatter: '{b}: {@2019} ({d}%)',
            },
            encode: {
              itemName: 'product',
              value: '2019',
              tooltip: '2019',
            }
          }
        ]
      },
      leftTitle: 'K49+850',
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      historyPoint: {
        State: -1,
        Point: [],
        Use: '',
        Business: '',
        ContractNum: '',
        CompanyName: ''
      },
      // leftList1:[
      //   {
      //     HoleNum: 'K48+100',//人手孔桩号
      //     Point: [114.337568846791243, 34.844352712192673],//经纬度
      //     PipelineType:'硅芯管'//管道根数
      //   }
      // ],
      leftList: [
        {
          PipeNo:1,
          Num: 'G30ZZ001',
          Color: '红X2',
          State: 2,
          Use: '自用',
          Fee: '',
          HoleNum: 'K49+850',//人手孔桩号
          Point: [114.337568846791243, 34.844352712192673],//经纬度
          ContractNum: '',
          CompanyName: "洛阳分公司",
          PipeSpec: "Φ40/33",
          Business: '收费',
          PipelineSpecifications:"Φ40/33",//管道规格
          PipelineTotal:"12",//管道总数量
          SelfPipelineNum:"2",//自用管道数量
          leasePilelineNum:"2",//租赁管道数量
          ResiduePilelineNum:"8",//剩余管道数量
          RouteChange:"",//是否存在路由变更
          BridgeCulvert:"是",//是否存在桥涵
          HiddenDanger:"绿化、损毁等情况",//是否存在其他隐患
          AdjacentIntersectingConditions:"",//相邻或相交互通情况
          SiliconCoreTubePosition:"中央隔离带",//硅芯管位置
          ReservedPipelineSituation:"",//预留管道情况
          notes:"全段管道不好，管道不通情况居多",
          PipelineType:"硅芯管",
          LineModel:"36"
        },
        {
          PipeNo:2,
          Num: 'G30ZZ002',
          Color: '黄X2',
          State: 2,
          Use: '自用',
          Fee: '',
          HoleNum: 'K49+850',
          Point: [114.337568846791243, 34.844352712192673],//经纬度
          ContractNum: '',
          CompanyName: "洛阳分公司",
          PipeSpec: "Φ40/33",
          Business: '监控',
          PipelineSpecifications:"Φ40/33",
          PipelineTotal:"12",//管道总数量
          SelfPipelineNum:"2",//自用管道数量
          leasePilelineNum:"2",//租赁管道数量
          ResiduePilelineNum:"8",//剩余管道数量
          RouteChange:"",//是否存在路由变更
          BridgeCulvert:"是",//是否存在桥涵
          HiddenDanger:"绿化、损毁等情况",//是否存在其他隐患
          AdjacentIntersectingConditions:"",//相邻或相交互通情况
          SiliconCoreTubePosition:"中央隔离带",//硅芯管位置
          ReservedPipelineSituation:"",//预留管道情况
          notes:"全段管道不好，管道不通情况居多",//备注,
          PipelineType:"硅芯管",
          LineModel:"38"
        },
        {
          PipeNo:3,
          Num: 'G30ZZ003',
          Color: '绿X2',
          State: 1,
          Use: '出租',
          Fee: '',
          HoleNum: 'K49+850',
          Point: [114.337568846791243, 34.844352712192673],//经纬度
          ContractNum: '22KL0001',
          CompanyName: "洛阳分公司",
          PipeSpec: "Φ40/33",
          Business: '',
          PipelineSpecifications:"Φ40/33",
          PipelineTotal:"12",//管道总数量
          SelfPipelineNum:"2",//自用管道数量
          leasePilelineNum:"2",//租赁管道数量
          ResiduePilelineNum:"8",//剩余管道数量
          RouteChange:"",//是否存在路由变更
          BridgeCulvert:"是",//是否存在桥涵
          HiddenDanger:"绿化、损毁等情况",//是否存在其他隐患
          AdjacentIntersectingConditions:"",//相邻或相交互通情况
          SiliconCoreTubePosition:"中央隔离带",//硅芯管位置
          ReservedPipelineSituation:"",//预留管道情况
          notes:"全段管道不好，管道不通情况居多",//备注,
          PipelineType:"硅芯管",
          LineModel:""
        },
        {
          PipeNo:4,
          Num: 'G30ZZ004',
          Color: '蓝X2',
          State: 1,
          Use: '出租',
          Fee: '',
          HoleNum: 'K49+850',
          Point: [114.337568846791243, 34.844352712192673],//经纬度
          ContractNum: '22KL0003',
          CompanyName: "洛阳分公司",
          PipeSpec: "Φ40/33",
          Business: '',
          PipelineSpecifications:"Φ40/33",
          PipelineTotal:"12",//管道总数量
          SelfPipelineNum:"2",//自用管道数量
          leasePilelineNum:"2",//租赁管道数量
          ResiduePilelineNum:"8",//剩余管道数量
          RouteChange:"",//是否存在路由变更
          BridgeCulvert:"是",//是否存在桥涵
          HiddenDanger:"绿化、损毁等情况",//是否存在其他隐患
          AdjacentIntersectingConditions:"",//相邻或相交互通情况
          SiliconCoreTubePosition:"中央隔离带",//硅芯管位置
          ReservedPipelineSituation:"",//预留管道情况
          notes:"全段管道不好，管道不通情况居多",//备注,
          PipelineType:"硅芯管",
          LineModel:""
        },
        {
          PipeNo:5,
          Num: 'G30ZZ005',
          Color: '紫X2',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+850',
          Point: [114.337568846791243, 34.844352712192673],//经纬度
          ContractNum: '',
          CompanyName: "洛阳分公司",
          PipeSpec: "Φ40/33",
          Business: '',
          PipelineSpecifications:"Φ40/33",
          PipelineTotal:"12",//管道总数量
          SelfPipelineNum:"2",//自用管道数量
          leasePilelineNum:"2",//租赁管道数量
          ResiduePilelineNum:"8",//剩余管道数量
          RouteChange:"",//是否存在路由变更
          BridgeCulvert:"是",//是否存在桥涵
          HiddenDanger:"绿化、损毁等情况",//是否存在其他隐患
          AdjacentIntersectingConditions:"",//相邻或相交互通情况
          SiliconCoreTubePosition:"中央隔离带",//硅芯管位置
          ReservedPipelineSituation:"",//预留管道情况
          notes:"全段管道不好，管道不通情况居多",//备注,
          PipelineType:"硅芯管",
          LineModel:""
        },
        {
          PipeNo:6,
          Num: 'G30ZZ006',
          Color: '白X2',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+850',
          Point: [114.337568846791243, 34.844352712192673],//经纬度
          ContractNum: '',
          CompanyName: "洛阳分公司",
          PipeSpec: "Φ40/33",
          Business: '',
          PipelineSpecifications:"Φ40/33",
          PipelineTotal:"12",//管道总数量
          SelfPipelineNum:"2",//自用管道数量
          leasePilelineNum:"2",//租赁管道数量
          ResiduePilelineNum:"8",//剩余管道数量
          RouteChange:"",//是否存在路由变更
          BridgeCulvert:"是",//是否存在桥涵
          HiddenDanger:"绿化、损毁等情况",//是否存在其他隐患
          AdjacentIntersectingConditions:"",//相邻或相交互通情况
          SiliconCoreTubePosition:"中央隔离带",//硅芯管位置
          ReservedPipelineSituation:"",//预留管道情况
          notes:"全段管道不好，管道不通情况居多",//备注,
          PipelineType:"硅芯管",
          LineModel:""
        },
        {
          PipeNo:7,
          Num: 'G30ZZ007',
          Color: '红X2',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+850',
          Point: [114.337568846791243, 34.844352712192673],//经纬度
          ContractNum: '',
          CompanyName: "洛阳分公司",
          PipeSpec: "Φ40/33",
          Business: '',
          PipelineSpecifications:"Φ40/33",
          PipelineTotal:"12",//管道总数量
          SelfPipelineNum:"2",//自用管道数量
          leasePilelineNum:"2",//租赁管道数量
          ResiduePilelineNum:"8",//剩余管道数量
          RouteChange:"",//是否存在路由变更
          BridgeCulvert:"是",//是否存在桥涵
          HiddenDanger:"绿化、损毁等情况",//是否存在其他隐患
          AdjacentIntersectingConditions:"",//相邻或相交互通情况
          SiliconCoreTubePosition:"中央隔离带",//硅芯管位置
          ReservedPipelineSituation:"",//预留管道情况
          notes:"全段管道不好，管道不通情况居多",//备注,
          PipelineType:"硅芯管",
          LineModel:""
        },
        {
          PipeNo:8,
          Num: 'G30ZZ008',
          Color: '黄X4',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+850',
          Point: [114.337568846791243, 34.844352712192673],//经纬度
          ContractNum: '',
          CompanyName: "洛阳分公司",
          PipeSpec: "Φ40/33",
          Business: '',
          PipelineSpecifications:"Φ40/33",
          PipelineTotal:"12",//管道总数量
          SelfPipelineNum:"2",//自用管道数量
          leasePilelineNum:"2",//租赁管道数量
          ResiduePilelineNum:"8",//剩余管道数量
          RouteChange:"",//是否存在路由变更
          BridgeCulvert:"是",//是否存在桥涵
          HiddenDanger:"绿化、损毁等情况",//是否存在其他隐患
          AdjacentIntersectingConditions:"",//相邻或相交互通情况
          SiliconCoreTubePosition:"中央隔离带",//硅芯管位置
          ReservedPipelineSituation:"",//预留管道情况
          notes:"全段管道不好，管道不通情况居多",//备注,
          PipelineType:"硅芯管",
          LineModel:""
        },
        {
          PipeNo:9,
          Num: 'G30ZZ009',
          Color: '绿X4',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+850',
          Point: [114.337568846791243, 34.844352712192673],//经纬度
          CompanyName: "洛阳分公司",
          PipeSpec: "Φ40/33",
          Business: '',
          PipelineSpecifications:"Φ40/33",
          PipelineTotal:"12",//管道总数量
          SelfPipelineNum:"2",//自用管道数量
          leasePilelineNum:"2",//租赁管道数量
          ResiduePilelineNum:"8",//剩余管道数量
          RouteChange:"",//是否存在路由变更
          BridgeCulvert:"是",//是否存在桥涵
          HiddenDanger:"绿化、损毁等情况",//是否存在其他隐患
          AdjacentIntersectingConditions:"",//相邻或相交互通情况
          SiliconCoreTubePosition:"中央隔离带",//硅芯管位置
          ReservedPipelineSituation:"",//预留管道情况
          notes:"全段管道不好，管道不通情况居多",//备注,
          PipelineType:"硅芯管",
          LineModel:""
        },
        {
          PipeNo:10,
          Num: 'G30ZZ010',
          Color: '蓝X4',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+850',
          Point: [114.337568846791243, 34.844352712192673],//经纬度
          CompanyName: "洛阳分公司",
          PipeSpec: "Φ40/33",
          Business: '',
          PipelineSpecifications:"Φ40/33",
          PipelineTotal:"12",//管道总数量
          SelfPipelineNum:"2",//自用管道数量
          leasePilelineNum:"2",//租赁管道数量
          ResiduePilelineNum:"8",//剩余管道数量
          RouteChange:"",//是否存在路由变更
          BridgeCulvert:"是",//是否存在桥涵
          HiddenDanger:"绿化、损毁等情况",//是否存在其他隐患
          AdjacentIntersectingConditions:"",//相邻或相交互通情况
          SiliconCoreTubePosition:"中央隔离带",//硅芯管位置
          ReservedPipelineSituation:"",//预留管道情况
          notes:"全段管道不好，管道不通情况居多",//备注,
          PipelineType:"硅芯管",
          LineModel:""
        },
        {
          PipeNo:11,
          Num: 'G30ZZ011',
          Color: '紫X4',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+850',
          Point: [114.337568846791243, 34.844352712192673],//经纬度
          CompanyName: "洛阳分公司",
          PipeSpec: "Φ40/33",
          Business: '',
          PipelineSpecifications:"Φ40/33",
          PipelineTotal:"12",//管道总数量
          SelfPipelineNum:"2",//自用管道数量
          leasePilelineNum:"2",//租赁管道数量
          ResiduePilelineNum:"8",//剩余管道数量
          RouteChange:"",//是否存在路由变更
          BridgeCulvert:"是",//是否存在桥涵
          HiddenDanger:"绿化、损毁等情况",//是否存在其他隐患
          AdjacentIntersectingConditions:"",//相邻或相交互通情况
          SiliconCoreTubePosition:"中央隔离带",//硅芯管位置
          ReservedPipelineSituation:"",//预留管道情况
          notes:"全段管道不好，管道不通情况居多",//备注,
          PipelineType:"硅芯管",
          LineModel:""
        },
        {
          PipeNo:12,
          Num: 'G30ZZ012',
          Color: '白X4',
          State: 3,
          Use: '空闲',
          Fee: '',
          HoleNum: 'K49+850',
          Point: [114.337568846791243, 34.844352712192673],//经纬度
          CompanyName: "洛阳分公司",
          PipeSpec: "Φ40/33",
          Business: '',
          PipelineSpecifications:"Φ40/33",
          PipelineTotal:"12",//管道总数量
          SelfPipelineNum:"2",//自用管道数量
          leasePilelineNum:"2",//租赁管道数量
          ResiduePilelineNum:"8",//剩余管道数量
          RouteChange:"",//是否存在路由变更
          BridgeCulvert:"是",//是否存在桥涵
          HiddenDanger:"绿化、损毁等情况",//是否存在其他隐患
          AdjacentIntersectingConditions:"",//相邻或相交互通情况
          SiliconCoreTubePosition:"中央隔离带",//硅芯管位置
          ReservedPipelineSituation:"",//预留管道情况
          notes:"全段管道不好，管道不通情况居多",//备注,
          PipelineType:"硅芯管",
          LineModel:""
        }
      ],
      linkData: [],
      linkArray: [
        [
          {
            Num: 'G30/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G30/K258+881',
            Status: '自用',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G30/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G30/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G30/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          }
        ],
        [
          {
            Num: 'G31/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G31/K258+881',
            Status: '自用',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G31/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G31/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G31/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          }
        ],
        [
          {
            Num: 'G32/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G32/K258+881',
            Status: '自用',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G32/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G32/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          },
          {
            Num: 'G32/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          }
        ]
      ],
      flag: -1,
      flag1: 0,
      flag3: -1,
      flag4: -1,
      current: 'active',
      loading: true,
      showContractDialog: false,
      showDialog: false,
      showMapDialog: false,
      name: '',
      cityOptions: [
        '京港澳高速',
        '连霍高速',
        '济广高速',
        '宁洛高速',
        '沪陕高速',
        '大广高速',
        '二广高速',
        '德上新建高速',
        '郑州西南环城高速',
        '长济高速',
        '郑州机场路',
        '南林高速',
        '范辉高速',
        '新济高速'
      ],
      buttonName: '请选择',
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
      cityOptions1: [
        '安新分公司',
        '恒淮分公司',
        '开封分公司',
        '洛阳分公司',
        '南阳分公司',
        '三门峡分公司',
        '商丘分公司',
        '桃花峪黄河大桥',
        '信阳分公司',
        '禹登分公司'
      ],
      checkAll1: false,
      checkedCities1: [],
      cities1: [],
      isIndeterminate1: true,
      currentContract: [
        {
          Num: '',
          Map: [],
          Mileage: '',
          contractDate: '',
          highWayName: '',
          stakeNum: ''
        }
      ],
      contract: [],
      contractData: [
        {
          Num: '22KL0001',//合同编号
          Map: ['郑州', [113.65, 34.73], 2],
          Mileage: '38.438',//租赁公里数
          contractDate: '2022.11.18-2037.11.17',//合同期限
          highWayName: 'S49焦桐高速、G1516盐洛高速',//高速名称
          roadName: '巩登段、少洛段',
          stakeNum: 'K55+800-K92、K794+638-K792+400',//桩号
          timeOfContract: '2022.12.5',
          roadIndex: [],
          OperatorName:"中国电信郑州分公司"
        },
        {
          Num: '22KL0002',
          Map: ['郑州', [115.65, 34.44], 4],
          Mileage: '37.638',
          contractDate: '2022.6.1-2037.5.31',//合同期限
          highWayName: 'S49焦桐高速、G1516盐洛高速',//高速名称
          roadName: '巩登段、少洛段',
          stakeNum: 'K55+800-K92、K794+638-K792+400',//桩号
          timeOfContract: '2022.4.15',//签订日期
          roadIndex: [],
          OperatorName:"中国联合网络通信有限公司郑州分公司"

        },
        {
          Num: '22KL0003',
          Map: ['信阳', [113.65, 34.73], 2],
          Mileage: '2.4',
          contractDate: '2023.10.1-2038.9.30',//合同期限
          highWayName: 'S4京港澳高速',//高速名称
          roadName: '驻信段',
          stakeNum: 'K1005+100-K1007+500',//桩号
          timeOfContract: '',
          roadIndex: [],
          OperatorName:"中国电信河南分公司"
        },
        {
          Num: '22KL0004',
          Map: ['信阳', [111.19, 34.76], 0],
          Mileage: '520',
          contractDate: '2023.10.1-2038.9.30',//合同期限
          highWayName: 'S40沪陕高速',//高速名称
          roadName: '叶信段',
          stakeNum: 'K763-K1283',//桩号
          timeOfContract: '',
          roadIndex: [],
          OperatorName:"中国电信河南分公司"
        },
        {
          Num: '22KL0005',
          Map: ['郑州', [111.19, 34.76], 0],
          Mileage: '326.5',
          contractDate: '2022.5.26-2037.5.25',//合同期限
          highWayName: 'G30连霍高速',//高速名称
          roadName: '商丘东段-郑州广武西段',
          stakeNum: 'K283+718-K610+300',//桩号
          timeOfContract: '2022.11.29',
          roadIndex: ['0','1','2'],
          OperatorName:"中国有线电视网络有限公司"
        }
      ],
      contractData1: [
        [
          {
            Num: 'E-ZY2022037',
            Map: ['三门峡', [111.19, 34.76], 0],
            Mileage: '326.5',
          },
          {
            Num: 'CU12-4102-2022-002138',
            Map: ['商丘', [115.65, 34.44], 4],
            Mileage: '37.638',
          },
          {
            Num: 'HAZZS2206950ACN00',//合同编号
            Map: ['郑州', [113.65, 34.73], 2],
            Mileage: '38.438',//租赁公里数
          },
          {
            Num: 'HASGS2300012BCN00',
            Map: ['三门峡', [111.19, 34.76], 0],
            Mileage: '520',
          },
          {
            Num: 'HASGS2300010BCN00',
            Map: ['信阳', [113.65, 34.73], 2],
            Mileage: '2.4',
          }
        ]
      ],
      companyList: [
        '三门峡分公司', '洛阳分公司', '郑州分公司', '开封分公司', '商丘分公司', '南阳分公司', '漯河分公司', '许昌分公司', '平顶山分公司', '周口分公司', '驻马店分公司', '新乡分公司', '鹤壁分公司', '焦作分公司', '濮阳分公司', '安阳分公司', '信阳分公司', '济源分公司'
      ],
      componyManageKM: [
        ['三门峡', 421.051, 172],
        ['洛阳', 578.461, 105.00],
        ['郑州', 326.49, 126.076],
        ['信阳', 618.243, 108],
        ['驻马店', 536.839, 300],
        ['南阳', 578.658, 402],
        ['开封', 201.61, 0],
        ['商丘', 375.579, 0],        
        ['许昌', 134.887, 0],
        ['平顶山', 195.514, 0],
        ['周口', 282.54, 0],
        ['新乡', 203.581, 0],
        ['鹤壁', 155.292, 0],
        ['焦作', 174.107, 0],
        ['濮阳', 250.554, 0],
        ['安阳', 169.4554, 0],
        ['济源', 125.609, 0]
      ],
      componyPoint: [
        ['三门峡', [111.19, 34.76], 242],
        ['洛阳', [112.4, 34.67], 342],
        ['郑州', [113.65, 34.73], 322],
        ['开封', [114.35, 34.78], 223],
        ['商丘', [115.65, 34.44], 221],
        ['南阳', [], 365],
        ['漯河', [], 457],
        ['许昌', [], 345],
        ['平顶山', [], 222],
        ['周口', [], 275],
        ['驻马店', [], 221],
        ['新乡', [], 154],
        ['鹤壁', [], 366],
        ['焦作', [], 521],
        ['濮阳', [], 124],
        ['安阳', [], 634],
        ['信阳', [], 245],
        ['济源', [], 246]
      ],
      mask1: '',
      mask2: [],
      mask3: '',
      markers: [],
      polylines: [],
      map: ''
    }
  },
  created () {
  },
  mounted () {
    this.contract = this.contractData
    this.timeFn()
    this.cities = this.cityOptions
    this.cities1 = this.cityOptions1
    this.setMap()
  },
  beforeDestroy () {

  },
  methods: {
    timeFn () {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    handleCheckAllChange (val) {
      this.checkedCities = val ? this.cityOptions : []
      this.isIndeterminate = false
      this.buttonName = this.checkedCities[0]
        ? this.checkedCities[0].slice(0, 5) + '...'
        : '请选择'
    },
    handleCheckedCitiesChange (value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length
      this.buttonName = this.isIndeterminate
      this.buttonName =
        this.checkedCities.length > 0
          ? this.checkedCities[0].length > 5
            ? this.checkedCities[0].slice(0, 5) + '...'
            : this.checkedCities.length > 1
              ? this.checkedCities[0] + '...'
              : this.checkedCities[0]
          : '请选择'
    },
    handleCheckAllChange1 (val) {
      this.checkedCities1 = val ? this.cityOptions1 : []
      this.isIndeterminate1 = false
      this.buttonName = this.checkedCities1[0]
        ? this.checkedCities1[0].slice(0, 5) + '...'
        : '请选择'
    },
    handleCheckedCitiesChange1 (value) {
      const checkedCount1 = value.length
      this.checkAll1 = checkedCount1 === this.cities1.length
      this.isIndeterminate1 =
        checkedCount1 > 0 && checkedCount1 < this.cities1.length
      console.log(3333, this.checkedCities1[0])
      this.buttonName =
        this.checkedCities1.length > 0
          ? this.checkedCities1[0].length > 5
            ? this.checkedCities1[0].slice(0, 5) + '...'
            : this.checkedCities1.length > 1
              ? this.checkedCities1[0] + '...'
              : this.checkedCities1[0]
          : '请选择'
    },

    openDialog () {
      const icon = document.getElementsByClassName('el-icon-arrow-down')[0]
      if (icon.classList.contains('arrow')) {
        icon.classList.replace('arrow', 'arrow-up')
      } else if (icon.classList.contains('arrow-up')) {
        icon.classList.replace('arrow-up', 'arrow')
      } else {
        icon.classList.add('arrow')
      }
      if (this.showDialog) {
        this.showDialog = false
      } else {
        this.showDialog = true
      }
      console.log(this.showDialog)
    },
    clickTr (item) {
      this.flag4 = -1
      this.remove()
      // this.flag = index
      // if (index < 5) {
      // this.setLayer(item)
      this.setLayer(item, '#f5c065')
      this.currentCity = item[0] + '市'
      // this.setRoute(item, index)
      // }
    },
    clickTr1 (item, index) {
      _throttle(() => {
        this.flag = -1
        this.remove()
        this.flag4 = index
        // this.setLayer(item)
        this.setLayer(item, '#f5c065')
        this.currentCity = item[0] + '市'
        // this.setRoute(item, item[2])
        // this.setMarker(item)
      }, 300)()
    },
    clickTr2 (item, index) {
      _throttle(() => {
        this.flag = -1
        this.remove()
        this.flag4 = item
        // this.setLayer(item)
        this.showContractInfo(index)
        this.setRoute1(item)
        // this.setMarker(item)
      }, 300)()
    },
    clickIcon (e, item, index) {
      // console.log(e)
      this.flag1 = index
      this.historyPoint = item
    },
    prev () {
      this.historyPoint = this.leftList[this.flag1]
      this.flag3 = 1
    },
    next () {
      if (this.flag1 === this.leftList.length - 1) {
        this.historyPoint = this.leftList[this.leftList[0]]
      } else {
        this.historyPoint = this.leftList[this.flag1 + 1]
      }
      this.flag3 = 2
    },
    setMap () {
      let that = this
      var options = {
        subdistrict: 0,//街道
        extensions: 'all',//延伸
        level: 'province'//级别：省份
      }
      var district = new window.AMap.DistrictSearch(options)
      // 查询河南省区域
      district.search('河南省', (status, result) => {
        var bounds = result.districtList[0]['boundaries']
        // 实例化地图

        this.map = new window.AMap.Map('boxMap', {
          zoom: 7.5,                //设置当前显示级别
          expandZoomRange: true,    //开启显示范围设置
          zooms: [3, 20],          //最小显示级别为7，最大显示级别为20
          center: [113.624129, 34.160339],
          // viewMode: '3D',          //这里特别注意，设置为3D则其它地区不显示
          // zoomEnable: true,        //是否可以缩放地图
          // resizeEnable: true,
          mapStyle: "amap://styles/darkblue"
        })
        // 外多边形坐标数组和内多边形坐标数组
        var outer = [
          new AMap.LngLat(-360, 90, true),
          new AMap.LngLat(-360, -90, true),
          new AMap.LngLat(360, -90, true),
          new AMap.LngLat(360, 90, true),
        ]
        var pathArray = [
          outer
        ]

        pathArray.push.apply(pathArray, bounds)
        // 添加遮罩
        var mask = new AMap.Polygon({
          path: pathArray,  // 边界坐标点集合
          fillColor: '#011c2d',  // 填充色
          // strokeColor: '#3078AC',
          fillOpacity: 0.5,      // 填充透明度
          strokeWeight: 3,       // 边框宽度，设为 0 表示没有边框
          zIndex: 1            // 显示优先级，越大越靠上层
        })
        mask.on('mouseover', () => {
          if (this.currentCity) {
            this.remove1()
            this.currentCity = ''
          }
        })
        this.map.add(mask)
        // 添加总路线 连霍高速
        // let color = [
        //   { name: '三门峡', color: '#99004C' },//00E400
        //   { name: '洛阳', color: '#99004C' },//FFFF00
        //   { name: '郑州', color: '#99004C' },//FF7E00
        //   { name: '开封', color: '#99004C' },//FF0000
        //   { name: '商丘', color: '#99004C' },//99004C
        //   { name: '安阳', color: '#99004C' },//99004C
        //   { name: '鹤壁', color: '#99004C' },//99004C
        //   { name: '新乡', color: '#99004C' },//99004C
        //   { name: '许昌', color: '#99004C' },//99004C
        //   { name: '漯河', color: '#99004C' },//99004C
        //   { name: '驻马店', color: '#99004C' },//99004C
        //   { name: '信阳', color: '#99004C' },//99004C
        //   { name: 'hh', color: '#7E0023' },//7E0023
        //   { name: 'mo', color: '#5CC0D4' }//5CC0D4 监控点位颜色
        // ]
        let useColor = { name: '三门峡', color: '#99004C' }
        route.forEach((city) => {
          city.forEach((item) => {
            let path = []
            item.forEach((point) => {
              path.push(new AMap.LngLat(point[0], point[1]))
            })
            let polyline = new AMap.Polyline({
              path: path,
              strokeWeight: 5, // 线条宽度，默认为 1
              strokeColor: useColor.color, // 线条颜色
              lineJoin: 'round', // 折线拐点连接处样式
              zIndex: 1001           // 显示优先级，越大越靠上层
            })
            that.map.add(polyline)
            this.polylines.push(polyline)
          })
        })
        that.setMarker()
        that.componyPoint.forEach((item, index) => {
          this.setLayer(item, '#011c2d')
          console.log(index)
        })
      })

    },
    remove () {
      // if (this.markers.length > 0) {
      //   this.map.remove(this.markers)
      // }
      if (this.mask2.length > 0) {//合同信息消除
        this.map.remove(this.mask2)
      }
      this.map.remove(this.mask3)
      if (this.mask1) {
        this.map.remove(this.mask1)
      }
    },
    remove1 () {
      this.map.remove(this.mask3)
    },
    setMarker () {
      let marker
      markerList.forEach((item) => {
        item[1].forEach((poi) => {
          marker = new AMap.Marker({
            map: this.map,
            offset: [0, -31],
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: poi
          })
          this.markers.push(marker)
          marker.on('click', this.showInfoA)
        })
      })
    },
    showInfoA () {
      this.showMapDialog = true
      this.flag3 = 1
      this.historyPoint = this.leftList[0]
    },
    setLayer (item, fillColorValue) {
      var options = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
      }
      var district = new window.AMap.DistrictSearch(options)
      // 查询区域
      district.search(item[0], (status, result) => {
        let bounds1 = result.districtList[0]['boundaries']
        // 添加描边
        this.mask1 = new AMap.Polygon({
          path: bounds1[bounds1.length - 1],  // 边界坐标点集合
          fillColor: fillColorValue,  // 填充色
          // fillColor:'#011c2d',
          // strokeColor: '#3078AC',
          fillOpacity: 0.3,      // 填充透明度
          strokeWeight: 1,       // 边框宽度，设为 0 表示没有边框
          zIndex: 999            // 显示优先级，越大越靠上层
        });
        this.map.add(this.mask1)
        this.mask1.on('mouseover', () => {
          debounce(() => {
            let city = item[0]
            if (this.currentCity !== city) {
              this.remove1()
              console.log(this.mask1)
              this.setLayer1(bounds1)
              this.currentCity = city
            }
          }, 0)()
        })
      })
    },
    setLayer1 (bounds1) {
      // 添加描边
      this.mask3 = new AMap.Polygon({
        path: bounds1[bounds1.length - 1],  // 边界坐标点集合
        fillColor: 'rgb(245, 192, 101)',  // 填充色
        // strokeColor: '#3078AC',
        fillOpacity: 0.3,      // 填充透明度
        strokeWeight: 1,       // 边框宽度，设为 0 表示没有边框
        zIndex: 999            // 显示优先级，越大越靠上层
      });
      this.map.add(this.mask3);
    },
    setRoute (dataLine, index) {
      // 绘制道路信息
      var color = [
        { name: '三门峡', color: '#00E400' },
        { name: '洛阳', color: '#FFFF00' },
        { name: '郑州', color: '#FF7E00' },
        { name: '开封', color: '#FF0000' },
        { name: '商丘', color: '#99004C' },
        { name: 'hh', color: '#7E0023' },
        { name: 'mo', color: '#5CC0D4' }// 监控点位颜色
      ]
      var polyline
      var lineColor = color[index]
      route[index].forEach((item) => {
        let path = []
        item.forEach((point) => {
          path.push(new AMap.LngLat(point[0], point[1]))
        })
        polyline = new AMap.Polyline({
          path: path,
          strokeWeight: 5, // 线条宽度，默认为 1
          strokeColor: lineColor.color, // 线条颜色
          lineJoin: 'round', // 折线拐点连接处样式
          zIndex: 1001           // 显示优先级，越大越靠上层
        })

        this.map.add(polyline)
        // let that = this
        function showInfoM () {
          // that.setMarker(dataLine)
        }
        polyline.on('click', showInfoM)
        this.polylines.push(polyline)
      })
    },
    //合同信息框
    showContractInfo (index) {
      this.showContractDialog = true
      this.currentContract = this.contractData[index]
    },
    setRoute1 (road) {
      // 绘制道路信息
      var color = [
        { name: '三门峡', color: '#00E400' },
        { name: '洛阳', color: '#FFFF00' },
        { name: '郑州', color: '#FF7E00' },
        { name: '开封', color: '#FF0000' },
        { name: '商丘', color: '#5CC0D4' },//99004C
        { name: 'hh', color: '#7E0023' },
        { name: 'mo', color: '#5CC0D4' }// 监控点位颜色
      ]
      var polyline
      var lineColor
      var roadIndex = road.roadIndex
      // var r;
      roadIndex.forEach((po) => {
        route[po].forEach((item) => {          
          lineColor = color[po]
          // alert(lineColor.color)
          let path = []
          item.forEach((point) => {
            // r=point[0]+","+point[1];
            path.push(new AMap.LngLat(point[0], point[1]))
          })
          polyline = new AMap.Polyline({
            path: path,
            strokeWeight: 5, // 线条宽度，默认为 1
            strokeColor: lineColor.color, // 线条颜色
            lineJoin: 'round', // 折线拐点连接处样式
            zIndex: 1001           // 显示优先级，越大越靠上层
          })
          this.map.add(polyline)
          this.mask2.push(polyline);
          
          // let that = this
          // function showInfoM() {
          //   that.setMarker(dataLine)
          // }
          // polyline.on('click', showInfoM)
          // this.polylines.push(polyline)
        })
      })
      // alert(r);
    },


  }
}
</script>

<style lang="scss">
#boxMap {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.chart {
  width: 250px;
  height: 280px;
}

.baseBoxLeftBottom {
  width: 30%;
  height: 65%;
  margin-top: 1%;
  position: relative;
  top: 74%;
  z-index: 100;
}
.baseBoxLeftBottom .boxTitle {
  position: absolute;
  top: 3%;
  left: 10%;
  z-index: 999;
  line-height: 30px;
  margin: 0;
  padding: 0;
  text-align: left;
  height: 50px;
}
.baseBoxLeftBottom img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
}
.baseBoxRightBottom {
  width: 100%;
  height: 47%;
  margin-top: 1%;
  position: relative;
  top: 53%;
  z-index: 99;
}
.baseBoxRightBottom .boxTitle {
  position: absolute;
  top: 3%;
  left: 10%;
  z-index: 999;
  line-height: 30px;
  margin: 0;
  padding: 0;
  text-align: left;
  height: 50px;
}

.baseBoxRightBottom img {
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 97%;
}
.baseBoxLeftBottom .chart {
  position: absolute;
  left: 10px;
  right: 0;
  top: 50px;
  bottom: 0;
  margin: auto;
  width: 90%;
  height: 90%;
}
.baseBoxRightBottom .chart {
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  bottom: 0;
  margin: auto;
  z-index: 100;
  width: 90%;
  height: 90%;
}
.baseBoxLeftBottom > .leftBottom {
  // position: absolute;
  width: 100%;
  height: 30%;
  z-index: 9999;
}

// .map_contract_dialog{
//   .el-contract-dialog {
//     background: rgba(0, 0, 0, 0.6);
//     overflow: hidden;
//     border: 2px solid #0efcff;
//     border-radius: 5px;
//     box-shadow: 0 0 25px 15px rgba(14, 252, 255, 0.5);
//     .el-contract-dialog__title {
//       color: #fff;
//       .el-contract-dialog__close {
//         color: #fff;
//       }
//     }
//   }
// }

.map_dialog {
  .el-dialog {
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    border: 2px solid #0efcff;
    border-radius: 5px;
    box-shadow: 0 0 25px 15px rgba(14, 252, 255, 0.5);
    .el-dialog__title {
      color: #fff;
      .el-dialog__close {
        color: #fff;
      }
    }
    .el-dialog__body {
      padding: 0px 20px 20px;
    }
  }
  .top {
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .img {
      width: 45%;
    }
    .steps {
      width: 45%;
      height: 225px;
      // background: #03da8d;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      overflow: hidden;
      .step {
        display: flex;
        justify-content: start;
        .icon {
          position: relative;
          width: 25px;
          height: 35px;
          .point {
            position: absolute;
            top: 10px;
            left: 1px;
            z-index: 99;
            width: 17px;
            height: 17px;
            background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
            border-radius: 17px;
          }
          .lease {
            // background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
            background-image: linear-gradient(120deg, #ff9700 0%, #ed1c24 100%);
          }
          .used {
            background-image: linear-gradient(to top, #39b54a 0%, #8dc63f 100%);
          }
          .space {
            background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
          }
          .line {
            position: absolute;
            left: 9px;
            top: 0;
            width: 1px;
            height: 35px;
            background: rgb(112, 112, 119);
          }
        }
        .detail {
          span {
            line-height: 35px;
            display: block;
            float: left;
          }
          .num {
            width: 35px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .state {
            width: 50px;
          }
          .company {
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .used {
            width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .company {
            width: 100px;
          }
        }
        .current {
          color: red;
        }
      }
      .active {
        color: #0efcff;
      }
    }
  }

  .dialog_btn {
    display: flex;
    justify-content: start;
    .btn_group1 {
      // width: 50px;
      // height: 35px;
      // margin: 10px 0 15px;
      // display: inline-block;
      button {
        width: 90px;
        height: 45px;
        border: 1px solid #fff;
        border-radius: 3px;
        color: #fff;
        background: transparent;
        margin-right: 10px;
      }
      .active {
        color: #0efcff;
      }
    }
  }

  .dialog_bottom {
    font-size: 16px;
    line-height: 25px;
    display: flex;
    justify-content: space-between;
    .base_data,
    .pipe_data {
      width: 49%;
      p {
        color: #0efcff;
        background: rgba(255, 255, 255, 0.2);
        margin: 5px 0;
        width: 99%;
      }
      p,
      .btn_group,
      .step {
        margin: 5px 0;
      }
      .btn_group {
        width: 53%;
        height: 35px;
        display: flex;
        justify-content: space-between;
        margin: 10px 0 15px;
        button {
          width: 48%;
          border: 1px solid #fff;
          border-radius: 3px;
          color: #fff;
          background: transparent;
        }
        .active {
          // border-color: #0efcff;
          // color: #0efcff;
        }
      }
      .step {
        margin: 10px 0;
      }
      span {
        color: #fff;
      }
      .icon {
        float: left;
        position: relative;
        width: 25px;
        height: 40px;
        line-height: 40px;
        .point {
          position: absolute;
          top: 4px;
          left: 1px;
          z-index: 99;
          width: 17px;
          height: 17px;
          background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
          border-radius: 17px;
        }
        .lease {
          background-image: linear-gradient(120deg, #ff9700 0%, #ed1c24 100%);
        }
        .used {
          background-image: linear-gradient(to top, #39b54a 0%, #8dc63f 100%);
        }
        .space {
          background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
        }
      }
    }
  }
}

.boxRader {
  position: relative;
  width: 100%;
  height: 80%;
}

.centerBox {
  width: 75%;
  margin-right: 15px;
  background: transparent;
}

.boxFont {
  font-size: 1.2vw;
}

.centerMainBox1 {
  width: 100%;
  height: 60.5%;
  background-color: none;
}

.centerMainBox2 {
  width: 100%;
  height: 38.5%;
  position: relative;
  margin-top: 15px;
}

.centerMainBox2 img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.boxTitle2 {
  width: 100%;
  height: 10%;
  font-size: 0.6vw;
  text-align: center;
  line-height: 10%;
  margin-top: 1vw;
  color: #0efcff;
}

.boxLis {
  width: 70%;
  height: 1.5vw;
  margin-left: 3vw;
  margin-top: 1vw;
  border-bottom: 0.02vw solid rgb(40, 229, 233);
}

.boxLis > li {
  width: 4vw;
  height: 1.4vw;
  display: block;
  background: rgba(40, 229, 233, 0.5);
  margin-right: 0.5vw;
  color: #fff;
  line-height: 1.4vw;
  text-align: center;
  cursor: pointer;
}

.btn_left {
  position: relative;
}
.btn_right {
  position: relative;
  z-index: 99;
}
// .sel_btn,
// .logo {
//   position: absolute;
//   z-index: 99;
//   height: 26px;
//   width: 100px;
//   background: transparent;
//   color: #0efcff;
//   border-radius: 3px;
//   // font-size: 14px;
//   line-height: 26px;
//   padding: 3px 10px;
//   overflow: hidden;
//   margin: 2.8% 0 0.5% 1%;
// }
.logo {
  position: absolute;
  z-index: 99;
  width: 140px;
  height: 38px;
  // border: 1px solid #0efcff;
  margin: 2.8% 0 0.5% 1%;
}
.time_bar {
  position: absolute;
  z-index: 99;
  height: 38px;
  width: 195px;
  left: 230px;
  color: #fff;
  // border: 1px solid #0efcff;
  font-size: 15px;
  line-height: 38px;
  margin: 2.8% 0 0.1% 1%;
}
.sel_btn i {
  float: right;
  line-height: 26px;
}

.arrow {
  transform: rotate(180deg);
  transition: all 0.5s;
}

.arrow-up {
  transform: rotate(0deg);
  transition: all 0.5s;
}

.list-dialog {
  position: absolute;
  z-index: 999;
  top: 45px;
  left: 10px;
  background: #164e5f;
  padding: 10px;
  font-size: 14px;
  line-height: 16px;
  color: #fff;
}

.el-checkbox__input .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #0efcff !important;
  color: #0efcff !important;
  background-color: #164e5f !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #0efcff !important;
  color: #0efcff !important;
  background-color: #164e5f !important;
}

.el-checkbox.is-checked .el-checkbox__label {
  color: #0efcff !important;
}

.el-checkbox .el-checkbox__label {
  color: #fff !important;
}

.el-checkbox__inner:hover {
  border-color: #0efcff !important;
}

.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #0efcff !important;
}

.contList {
  position: relative;
  width: 70%;
  height: 7vw;
  margin: 1vw auto 0;
}

.el-checkbox-group {
  width: 470px;
  display: flex;
  flex-wrap: wrap;
}

.el-checkbox-group .el-checkbox {
  width: 200px;
}

.content1 li {
  display: none;
}

.baseBox {
  width: 100%;
  border: none;
  background: none;
}

.boxTitle {
  position: relative;
  z-index: 999;
  font-size: 1vw;
  width: 38%;
  margin-top: 1vw;
  text-align: center;
}
.rightBox {
  width: 22%;
  // height: 100%;
}
.right {
  float: right;
}

.baseBoxLeft {
  width: 30%;
  height: 70%;
  margin-top: 1%;
  position: relative;
}

.baseBoxRight {
  width: 68%;
  height: 75%;
}

.baseBoxLeft img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
}

.maps {
  width: 100%;
  height: 95%;
  margin-top: 2%;
  background: pink;
}

.baseBox1,
.baseBox2,
.baseBox3 {
  position: relative;
  z-index: 99;
}

.baseBox1 img,
.baseBox2 img,
.baseBox3 img {
  position: absolute;
  z-index: 99;
  top: 0;
  width: 100%;
  height: 155%;
}

.csbaseBox1 {
  position: relative;
  z-index: 999;
}

.liSpan {
  width: 100%;
  margin-top: 3.2%;
  text-align: center;
  color: rgb(40, 229, 233);
}

.liP {
  width: 90%;
  margin: 0.3vw auto 0;
  text-align: left;
  font-size: 0.5vw;
  color: rgb(40, 229, 233);
  display: flex;
  justify-content: space-around;
}

a:hover {
  text-decoration: none;
}

.titleName {
  color: #0efcff;
}

.plant {
  width: 90%;
  height: 5.5vw;
  margin: 2% auto 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
}

.plant > li {
  width: 32%;
  height: 100%;
  z-index: 999;
}

.jumps {
  width: 100%;
  height: 100%;
  background: rgba(0, 235, 255, 0.08);
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-justify-content: space-between;
  display: -moz-flex;
  -moz-flex-direction: column;
  -moz-justify-content: space-between;
  display: flex;
  z-index: 99;
  flex-direction: column;
  justify-content: space-between;
}

.jumps > div > img {
  width: 0.88vw;
  height: 0.88vw;
  float: right;
}

.jumps > p {
  width: 90%;
  font-size: 1.3vw;
  color: #fff;
  margin: auto;
}

.jumps > div {
  width: 90%;
  margin: 5% auto 0;
}

.jumps > div > span {
  font-size: 1vw;
  color: #0efcff;
  float: left;
}

.spans0 {
  width: 80%;
  height: 5%;
  background: #03da8d;
}

.spans1 {
  width: 80%;
  height: 5%;
  background: #0efcff;
}

.spans2 {
  width: 80%;
  height: 5%;
  background: #fe0000;
}

.spans3 {
  width: 80%;
  height: 5%;
  background: #f78001;
}

.boxVideo {
  width: 100%;
  height: 100%;
}

.boxVideo video {
  width: 100%;
  height: 100%;
}

.baseDatas {
  width: 70%;
  height: 2vw;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  margin: 1vw 0 0 5vw;
}

.baseDatas li {
  width: 10%;
}

.baseDatas li a {
  color: #fff;
  font-size: 0.8vw;
}

.active2 a > span {
  color: rgb(40, 229, 233);
}

.baseDatas li a:hover > span {
  color: rgb(40, 229, 233);
}

.contract-data {
  width: 99.8%;
  height: 195px;
  overflow-y: scroll;
}

.contract-data::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}

.contract-data::-webkit-scrollbar-thumb {
  background-color: #0efcff;
}

.borderActive {
  border-left-color: rgb(40, 229, 233);
  color: rgb(10, 12, 17);
}

.equipment-data {
  width: 99.8%;
  height: 50%;
  overflow-y: scroll;
}

.equipment-data::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}

.equipment-data::-webkit-scrollbar-thumb {
  background-color: #0efcff;
}

.equipment-box {
  position: absolute;
  top: 48px;
  z-index: 99;
  width: 100%;
  height: 85%;
  // border: 1px solid #0EFCFF;
  overflow-y: scroll;
}
.right .equipment-box {
  position: absolute;
  top: 48px;
  z-index: 99;
  width: 100%;
  height: 180%;
  overflow-y: scroll;
}

.equipment-info {
  z-index: 99;
  position: absolute;
  top: 380px;
  color: #0efcff;
  font-size: 14px;
  line-height: 18px;
  padding-left: 25px;
}

.equipment-box::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
  // color: rgb(245, 192, 101);
}

.equipment-box::-webkit-scrollbar-thumb {
  background-color: #0efcff;
}

.equipment_table {
  width: 95%;
  height: 25%;
  overflow-y: scroll;
  margin: auto;
  text-align: center;
  color: #fff;
  z-index: 99;
}

// .equipment_table tr:nth-child(1) {
//   // color: #0efcff;
// }
.equipment_table .active {
  // color: #0efcff;
  border-color: rgba(0, 235, 255, 0.08);
  // color:#0efcff;
}

.equipment_table tr {
  height: 35px !important;
  overflow: hidden;
  border: 1px solid#0EFCFF;
  font-size: 14px;
}

.table_left tr {
  border: 0;
}

// .equipment_table tr:nth-child(1) {
//   font-size: 1vw;
// }

.equipment_table img {
  width: 1vw;
}

.env_table {
  max-height: 78%;
  margin-top: 5%;
}

.env_table tr {
  height: 35px !important;
}

.env_table td {
  height: 35px !important;
  cursor: pointer;
  border: 1px solid#0EFCFF;
}

.table_left td {
  border: 0;
  cursor: pointer;
}

// .env_table tr:nth-child(1) {
// background: rgba(14, 252, 255, 0.3);
// }
.env_table .active {
  background: rgba(14, 252, 255, 0.3);
}

.map {
  height: 450px;
  margin: 10px auto;
}

.mapContentFont {
  width: 85%;
  margin-left: 12%;
  font-size: 0.6vw;
  color: #0efcff;
  letter-spacing: 0.05vw;
  margin-bottom: 0.3vw;
}

.mapContentFont:nth-child(1) {
  margin-top: 0.6vw;
}

.mapContentFont span {
  color: white;
}
</style>
